
<template>
  <div class="container">
    <!-- 一级标题 -->
    <div class="shibie">
      <div class="shibie_title">技术：数据资产打标</div>
      <!-- <div class="shibie_content">
        在识别战术领域，主要聚焦在数据资产发现和处理，本报告重点对数据资源发现，数据资产识别，数据资产处理（分析），数据分类分级，数据资产打标作出描述。
      </div> -->
    </div>
    <!-- 二级标题 -->
    <div class="shibie2">
      <el-table :data="tableData" border style="width: 95%; margin-left: 30px">
        <el-table-column prop="title" label="标题" width="100">
        </el-table-column>
        <el-table-column prop="basis" label="基本概念" width="620">
        </el-table-column>
        <el-table-column prop="main" label="主要实现"> </el-table-column>
      </el-table>
    </div>

    <!-- 扩展技术 -->
    <div class="technical-expansion">
      <h2 style="padding: 10px; margin: 20px">扩展技术</h2>
      <div style="margin-top: 20px">
        <span
            type="primary"
            style="margin-left: 45px; color: #429ccd; cursor: pointer"
            @click="drawer1 = true"
        >
          标记字段法
        </span>
        <el-drawer v-model="drawer1" title="标记字段法" :with-header="false">
          <div style="margin-top: 20px">
            <h5 style="display: block; margin-top: 10px;">基本概念</h5>
            <span style="display: block; text-indent: 2em;">标记字段法，是指把标记“打”在某一个公共访问的字段上面的技术手段。
                这个字段往往代表了数据的一种属性，从而能够作为区分数据资产方式的一个重要依据。</span>
            <h5 style="display: block; margin-top: 10px;">主要实现</h5>
            <span style="display: block; text-indent: 2em;">标记字段法的主要实现方式为自动获取企业所有数据库、所有表、所有字段，
                根据字段的值，利用正则表达式等方式判断此字段是否属于用户敏感信息，如姓
                名、手机、地址、身份证等。最终形成数据的风险地图，库、表、字段、敏感类
                型和等级，可以为统一加解密、统一日志等提供服务。[26]</span>
          </div>

        </el-drawer>
      </div>
      <div style="margin-top: 20px">
        <span
            type="primary"
            style="margin-left: 45px; color: #429ccd; cursor: pointer"
            @click="drawer2 = true"
        >
          元数据映射表法
        </span>
        <el-drawer
            class="drawer"
            v-model="drawer2"
            title="元数据映射表法"
            :with-header="false"
        >
          <div style="margin-top: 20px">
            <h5 style="display: block; margin-top: 10px;">基本概念</h5>
            <span style="display: block; text-indent: 2em;">元数据映射表法，是指利用元数据建立映射表，然后便于寻找相关数据的一
                种技术手段。元数据是指描述数据的数据，主要描述数据的属性信息，用来支持
                如指示存储位置、历史数据、资源查找、文件记录等功能。映射表则主要用来存
                放键值对，如果提供相应的键，就能查到相应的值。</span>
            <h5 style="display: block; margin-top: 10px;">主要实现</h5>
            <span style="display: block; text-indent: 2em;">元数据映射表法主要实现方式为编译前根据元数据生成映射代码、在运行期
            根据元数据通过反射实现映射。[32][33]</span>
          </div>

        </el-drawer>
      </div>
      <div style="margin-top: 20px">
        <span
            type="primary"
            style="margin-left: 45px; color: #429ccd; cursor: pointer"
            @click="drawer3 = true"
        >
          数字水印法
        </span>
        <el-drawer
            v-model="drawer3"
            title="数字水印法"
            :with-header="false"
        >
          <div style="margin-top: 20px">
            <h5 style="display: block; margin-top: 10px;">基本概念</h5>
            <span style="display: block; text-indent: 2em;">数字水印法，是指通过数字水印的方式，为数据资产打标。数据水印是基于
                  信息安全、信息隐藏、数据加密等技术，在数据文件页面中增加不可篡改的明水
                  印或肉眼无法识别的隐水印，实现对数据文件原始确权唯一性的确认。</span>
            <h5 style="display: block; margin-top: 10px;">主要实现</h5>
            <span style="display: block; text-indent: 2em;">数字水印的主要实现方式灰度值加密、位置加密、双因子加密等方法。
            [34][35][36]</span>
            <span style="display: block; text-indent: 2em;margin: 10px;"><b># 灰度值加密</b></span>
            <span style="display: block; text-indent: 2em;">图像的灰度值直方图本质上是一种表示数字图像各级灰度值及其出现频数
                关系的函数，描述的是图像中具有的该灰度值的像素的个数。像素灰度值加
                密是利用混沌映射产生的灰度值扰乱向量(矩阵)，对原始图像像素值进行扰
                乱，达到隐藏图像信息的目的。灰度值加密使用两个矩阵进行异或后得到。</span>
            <span style="display: block; text-indent: 2em;margin: 10px;"><b># 位置加密</b></span>
            <span style="display: block; text-indent: 2em;">利用混沌行为的不可重复、不可预测和初始条件极端敏感的特性，经过对混
                沌序列进行处理，产生混沌位置扰乱向量或者说混沌位置置乱矩阵，来改变
                像素在原始图像矩阵中的位置，达到图像不可读，掩盖图像信息的目的。</span>
            <span style="display: block; text-indent: 2em;margin: 10px;"><b># 双因子加密</b></span>
            <span style="display: block; text-indent: 2em;">为了增强安全性，采用位置加密和灰度值加密相结合(双因子加密) 的方法对
              水印图像进行加密。这种加密方法可降低在水印图像遭受提取时水印被破译
              的概率，确保水印的安全保密性。</span>
          </div>

        </el-drawer>
      </div>

    </div>
    <!-- 评论区 -->
    <div class="comments-section">
      <h3>评论区</h3>
      <div v-for="item in comments" :key="item.id" class="comment-item">
        <div>
          <strong>{{ item.username }}:</strong> <span>{{ item.content }}</span>
        </div>
        <span
            style="color: red; cursor: pointer"
            v-if="item.username === commentForm.username"
            @click="del(item.id)"
        >删除</span
        >
      </div>
      <div>
        <el-input
            class="comment-input"
            type="textarea"
            v-model="commentForm.content"
            placeholder="请输入评论内容"
        ></el-input>
      </div>
      <el-button class="comment-button" type="primary" @click="comment"
      >评论</el-button
      >

      <el-message
          v-if="errorMessage"
          :type="'error'"
          :message="errorMessage"
      ></el-message>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request.js";
import { ref } from "vue";
const drawer = ref(false);

export default {
  data() {
    return {
      tableData: [
        {
          title: "数据资产处理（分析）",
          content:
              "",
          basis:
              "数据资产打标指在生产过程中，依据国家相关规定或企业自身管理需求，在\n" +
              "产品上通过各种技术进行文字、图片等标识，产品并不局限于实体。",
          main:
              "数据资产打标的主要实现方式包括：基于关键字的敏感数据打标：通过字段\n" +
              "名称，注释信息；基于正则的敏感数据打标：通过样本数据；基于机器学习的敏\n" +
              "感数据打标：整个表中所有字段名，样本数据，与其他表的相似度进行训练；对\n" +
              "账号字段打标等。",
        },

      ],
      comments: [],
      pageId: 6,
      commentForm: {
        content: "",
        username: "", // 用户名会在 mounted 生命周期钩子中生成
        userId: "", // 用户 ID 会在 mounted 生命周期钩子中生成
      },
      errorMessage: "",
      drawer1: false,
      drawer2: false,
      drawer3: false,
      drawer4:false,
    };
  },
  methods: {
    generateUserId() {
      // 生成唯一用户ID，例如使用随机数或UUID
      return "user_" + Math.random().toString(36).substr(2, 9);
    },
    generateUsername() {
      // 生成自动用户名，例如基于时间戳或随机字符串
      return "User_" + Math.random().toString(36).substr(2, 5);
    },
    del(commentId) {
      // 获取要删除的评论
      const comment = this.comments.find((c) => c.id === commentId);

      if (comment) {
        // 只允许删除自己评论
        if (comment.username === this.commentForm.username) {
          request
              .delete(`/comments/${commentId}`)
              .then(() => {
                this.$message.success("评论删除成功");
                this.load(); // 重新加载评论列表
              })
              .catch((error) => {
                console.error("删除评论失败:", error);
                this.$message.error("删除评论失败");
              });
        } else {
          this.$message.error("您没有权限删除此评论");
        }
      } else {
        this.$message.error("评论未找到");
      }
    },
    load() {
      request
          .get("/comments/" + this.pageId)
          .then((res) => {
            this.comments = res.data;
          })
          .catch((error) => {
            console.error("加载评论失败:", error);
          });
    },
    comment() {
      this.errorMessage = "";
      if (!this.commentForm.content.trim()) {
        this.errorMessage = "评论不能为空";
        return;
      }
      // 使用自动生成的用户名
      request
          .post("/comments/" + this.pageId, {
            content: this.commentForm.content,
            username: this.commentForm.username,
            userId: this.commentForm.userId,
          })
          .then(() => {
            this.$message.success("评论成功");
            this.commentForm.content = "";
            this.load();
          })
          .catch((error) => {
            console.error("提交评论失败:", error);
            this.$message.error("提交评论失败");
          });
    },
  },
  mounted() {
    this.commentForm.username = this.generateUsername(); // 在 mounted 生命周期钩子中生成用户名
    this.commentForm.userId = this.generateUserId(); // 在 mounted 生命周期钩子中生成用户 ID
    this.load();
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .shibie {
    width: 100%;
    padding: 30px;
    .shibie_title {
      font-size: 36px;
      margin: 0 0 10px 0;
    }
  }
  .shibie_explain {
    margin: 20px 0 0 30px;
  }
  .comments-section {
    padding: 20px;
    height: 400px;
    margin-left: 20px;
    // 评论列表样式
    .comment-item {
      padding: 10px;
      margin-left: 10px;
    }
    .comment-input {
      margin: 15px 0;
    }
    .comment-button {
      width: 80px;
      height: 40px;
      font-size: 18px;
    }
  }
}
</style>;
